<template>
	<view>
		<!-- <u-loading v-if="loading"></u-loading> -->
		<nav-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">备婚研究院</block>
		</nav-custom>
		<view class="store-list">
			<view class="nav">
				<navigator url="../index/index" open-type="switchTab" class="item">
					<view class="iconfont icon-shouye"></view>
					<view>首页</view>
				</navigator>
				<view class="item" v-for="(item, index) in Nav" :index="index" @click="onNav(item.id)">
					<view class="iconfont" :class="[item.icon]"></view>
					<view>{{item.name}}</view>
				</view>
			</view>
			<view class="btn">
				<view class="item item1" @click="toCarList(1)">
					个性婚车
				</view>
				<view class="item item2" @click="toCarList(0)">
					精选车队
				</view>
			</view>
			<view class="list">
				<view class="onorder" v-if="newsList.length==0">
					<view class="iconfont icon-meiyouxiangguanshuju"></view>
				</view>
				<view class="item" v-for="(item, index) in newsList" :index="index" @click="onNewsList(item.id)">
					<view class="name">
						{{item.title}}
					</view>
					<view class="item-img">
						<image src="https://qnm.hunliji.com/o_1dfiq7oo44p013o81m221f5b1s0v9.png"></image>
						<image src="https://qnm.hunliji.com/o_1dfiq7oo44p013o81m221f5b1s0v9.png"></image>
						<image src="https://qnm.hunliji.com/o_1dfiq7oo44p013o81m221f5b1s0v9.png"></image>
					</view>
					<view class="item-lable">
						<view class="lable-l" v-for="(items, indexs) in item.tagsArray" :index="indexs">
							<view class="iconfont icon-biaoqian"></view>
							{{items}}
						</view>
					</view>
				</view>
				<no-more :visible="!pullUpOn" bgcolor="#fff"></no-more>
			</view>
		</view>
		<u-loading :visible="loading"></u-loading>
	</view>
</template>

<script>
	import noMore from "@/components/nomore";
	import {
		mapMutations
	} from 'vuex';
	export default {
		components: {
			noMore
		},
		data() {
			return {
				loading: true,
				pullUpOn: true, //没有更多了
				Nav: [{
						id: 9,
						name: '婚嫁习俗',
						icon: 'icon-minsuminfeng'
					},
					{
						id: 10,
						name: '婚姻政策',
						icon: 'icon-zhengce'
					},
					{
						id: 11,
						name: '婚礼筹备',
						icon: 'icon-zhunbei'
					},
					{
						id: 12,
						name: '婚纱摄影',
						icon: 'icon-sheying'
					},
					{
						id: 13,
						name: '结婚流程',
						icon: 'icon-liucheng'
					},
					{
						id: 14,
						name: '新娘新郎',
						icon: 'icon-jiehun'
					},
					{
						id: '',
						name: '查看全部',
						icon: 'icon-quanbu'
					}
				],
				articleType: '', //分类id
				newsList: [], //列表数组
				Current: 1, //页
				size: 10, //一页多少数据
				keyWord: '' //搜索关键字

			}
		},
		onLoad() {
			this.getNewsList()
		},
		methods: {
			...mapMutations(['current']),
			toCarList(type) {
				console.log(1)
				this.current(type);
				uni.switchTab({
					url: '../car/carlist'
				});
			},
			//点击菜单
			onNav(id) {
				this.articleType = id;
				this.loading = true;
				this.getNewsList();
			},
			//点击商家跳转
			onNewsList(id) {
				uni.navigateTo({
					url: `news_info?id=${id}`
				});
			},
			//获取商家数据
			getNewsList() {
				// this.loading = true;
				let data = {
					articleType: this.articleType,
					current: this.Current,
					size: this.size,
					keyWord: this.keyWord
				}
				this.$api.NewsList(data).then(res => {
					this.newsList.push(...res.data.records);
					setTimeout(() => {
						this.loading = false;
					}, 500)
				});
			},
			//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
			onPullDownRefresh() {
				setTimeout(() => {
					uni.stopPullDownRefresh();
					this.Current = 1;
					this.getNewsList()
				}, 1000);
			},
			//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
			onReachBottom() {
				if (this.newsList.length < this.size * this.Current) {
					this.pullUpOn = false;
					return
				} else {
					this.Current++;
					this.getNewsList()
				}
			},
		}
	}
</script>

<style lang="scss">
	.store-list {
		min-height: calc(100vh - 90upx);
		background-color: #fff;

		.nav {
			display: flex;
			flex-flow: wrap;
			padding: 0 0 28upx;

			.item {
				flex: 0 0 25%;
				text-align: center;
				margin-top: 28upx;

				.iconfont {
					font-size: 60upx;
					color: var(--pink);
				}

				view {
					margin-top: 10upx;
					font-size: 24upx;
					color: #666;
				}
			}
		}

		.btn {
			background-color: #fff;
			display: flex;
			height: 160upx;
			align-items: center;

			.item {
				text-align: center;
				height: 80upx;
				flex: 0 0 270upx;
				border-radius: 20upx;
				line-height: 80upx;
				margin: 0 70upx;
				font-size: 30upx;

				&.item1 {
					color: #fff;
					background-image: var(--gradualRed);
				}

				&.item2 {
					border: 2upx solid var(--pink);
					color: var(--pink);
					margin-left: 0;
				}
			}
		}

		.list {
			border-top: 16upx solid #f5f5f5;

			.onorder {
				width: 100%;
				height: calc(100vh - 446upx);
				display: flex;
				justify-content: center;
				align-items: center;

				.iconfont {
					font-size: 100upx;
					color: #999;
				}
			}

			.item {
				padding: 20upx 30upx 0;
				border-bottom: 1upx solid #f3f3f3;

				.name {
					color: #000;
					font-weight: bold;
					font-size: 36upx;
					line-height: 60upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					max-height: 120upx;
				}

				.item-img {
					display: flex;
					padding-top: 12upx;

					image {
						width: 220upx;
						height: 220upx;
						overflow: hidden;
						border-radius: 10%;
						margin-right: 15upx;

						&:last-child {
							margin-right: 0
						}
					}
				}

				.item-lable {
					height: 100upx;
					display: flex;
					align-items: center;

					.lable-l {
						height: 50upx;
						padding: 0 20upx;
						display: flex;
						border-radius: 25upx;
						align-items: center;
						font-size: 30upx;
						font-weight: bold;
						color: var(--pink);
						background-color: var(--pinkShadow);
						margin-right: 20upx;

						.iconfont {
							font-size: 30upx;
							margin-right: 10upx;
						}
					}
				}
			}
		}
	}
</style>
